<template>
  <div id="add-question">
    <head-tabar></head-tabar>
    <div
      style="position:absolute;margin-top: 90px;border: 1px solid #b3b3b3;width: 1000px;margin-left: 15%;padding: 20px">
      <h3 style="color:#7b9e31;">添加题目</h3>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="questionSort in this.questionSorts" :key="questionSort.questionSortId"
                     :label="questionSort.questionSortName" :name="questionSort.questionSortName">
          <div v-if="questionSort.isOption==1">
            <Choose></Choose>
          </div>
          <div v-else-if="questionSort.isOption==2">
            <multiple-choice></multiple-choice>
          </div>
          <div v-else>
            <anwser></anwser>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import HeadTabar from "../../components/HomeTaber/HeadTabar";
import Anwser from "./Anwser";
import Choose from "./Choose";
import MultipleChoice from "./MultipleChoice";

export default {
  name: "AddQuestion",
  data() {
    return {
      questionSorts: [],
      activeName: '',
    }
  },
  methods: {
    handleClick(tab, event) {
      let i;
      for (i = 0; i < this.questionSorts.length; i++) {
        if (this.questionSorts[i].questionSortName == tab.label) {
          break
        }
      }
      this.$store.commit('updateSortId',this.questionSorts[i].questionSortId)
    },
  },
  components: {
    HeadTabar,
    Anwser,
    Choose,
    MultipleChoice
  },
  mounted() {
    axios('/question/sort/show', {
      method: 'get'
    }).then(res => {
      this.questionSorts = res.data.data
      this.activeName = this.questionSorts[0].questionSortName
    }).catch(function (error) {
      console.log(error);
    });

  }
}
</script>

<style scoped>
</style>
